<template>
  <!-- 入库报表页面 -->
  <div class="entryDetail">
    <!--按钮区域 begin-->
    <div class="btns" style="padding: 1em; margin-bottom: 1em; background: #fff">
      <el-input v-model="searchForm.item" placeholder="设备名" clearable></el-input>
      <el-input v-model="searchForm.model" placeholder="型号" clearable></el-input>
      <el-date-picker
        style="margin-left: 8px"
        v-model="searchFormTemp.time"
        unlink-panels
        value-format="timestamp"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button @click="toSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px" >查询</el-button>
      <el-button class="exportButton" type="primary" icon="el-icon-download" @click="handleDownload" size="small">导出</el-button>
    </div>
    <!--按钮区域 end-->
    <!--表格卡片区域 begin-->
    <div class="btns">
    </div>
    <el-card shadow="never">
      <a-table size="small"
               :rowKey="record => record.id"
               :loading="entryDetailTable.loading"
               :data-source="entryDetailTable.data"
               :scroll="entryDetailTable.data.length > 0 ?{ x: 1000}:{}"
               id="report">
        <a-table-column :width="200" align="center" ellipsis="true" fixed="left" key="item" title="设备名" data-index="item" />
        <a-table-column :width="100" align="center" ellipsis="true" key="model" title="设备型号" data-index="model" />
        <a-table-column :width="50" align="center" ellipsis="true" key="unit" title="单位" data-index="unit" />
        <a-table-column :width="50" align="center" ellipsis="true" key="entryNumber" title="数量" data-index="entryNumber" />
        <a-table-column :width="100" align="center" ellipsis="true" key="price" title="总额" data-index="price" />
        <a-table-column :width="100" align="center" ellipsis="true" key="entryPerson" title="入库人" data-index="entryPerson" />
        <a-table-column :width="100" align="center" ellipsis="true" key="entryTime" title="入库时间" data-index="entryTime" />
      </a-table>
    </el-card>
    <!--表格卡片区域 end-->
  </div>
</template>
<script>

  import "@/styles/auto-style.css";
  import { getAction, postActionByJson, postActionByQueryString } from "@/api/manage";
  import elDragDialog from "@/directive/el-drag-dialog";
  import {dateTimeFormat} from "@/utils/format";
  import htmlToExcel from '@/utils/htmlToExcel';
  import request from "@/utils/request";
  export default {
    directives: { elDragDialog },
    data() {
      return {
        dateTimeFormat,
        url: {
          entryDetailInfo: '/report/entryDetail'
        },
        // 按钮区域表单
        searchForm: {
        },
        entryDetailTable: {
          data: [
          ],
          loading: false,
        },
        searchFormTemp: {}
      }
    },
    created() {
    },
    methods: {
      // 按钮区域搜索事件
      toSearch() {
        this.entryDetailTable.loading = true
        if(this.searchFormTemp.time != null){
          this.searchForm.startTime = this.searchFormTemp.time[0]
          this.searchForm.endTime = this.searchFormTemp.time[1]
          getAction(this.url.entryDetailInfo, this.searchForm)
            .then(resp => {
              this.entryDetailTable.data = resp.data
              this.entryDetailTable.loading = false
              console.log(resp.data)
            })
            .catch(()=>{
              this.entryDetailTable.loading = false
            })
          this.searchForm = {}
          this.$message.success("success")
        }else {
          return this.$message.error("请选择查询的时间范围")
        }
      },
      handleDownload() {
        this.downloadLoading = true
        request.request( {
          url: this.url.entryDetailInfo,
          methods: 'get',
          params: {
            pageFlag: 0,
            startTime: this.searchFormTemp.time[0],
            endTime: this.searchFormTemp.time[1],
          }
        }).then(resp => {
          let data1 = resp.data
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = [
              '设备名', '设备型号', '单位', '数量', '总额', '入库人','入库时间'
            ]
            const filterVal = [
              'item', 'model', 'unit', 'entryNumber', 'price', 'entryPerson', 'entryTime'
            ]
            const data = this.formatJson(filterVal, data1)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '入库明细报表'
            })
            this.downloadLoading = false
          })
        }).catch(()=>{
          this.downloadLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
    }
  }
</script>
<style lang="scss" scoped>
  .exportButton {
    position: absolute;
    right: 20px;
    margin: 4px 0px 0px 6px;
  }
</style>

